<template>
	<view>
		<view class="prefer-posi">
			<!-- 筛选区 -->
			<view class="delica-view">
				<view class="delica-list delica-grow" @click="multiple()">
					<text>{{synthesize}}</text>
					<image src="../../../static/coen/paixu.png" mode="widthFix"></image>
				</view>
				<view class="delica-grow" @click="saLes()">销量高</view>
				<view class="delica-grow" @click="saLes()">速度快</view>
				<view class="delica-grow" @click="saLes()">津贴联盟</view>
				<view class="delica-list delica-right" @click="scReen()">
					<text>筛选</text>
					<image src="../../../static/coen/shaixuan.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- 综合排序筛选 -->
			<view class="sortlist sortliteltle" v-if="drop">
				<block v-for="(item,index) in sortlist" :key="index">
				<text :class="{activeb: index == num}" @click="sortClick(index,item.name,item.screen,item.nums)">{{item.name}}</text>
				</block>
			</view>
			<!-- 多个筛选区 -->
			<view class="sortlist sortlist-view" v-if="sortmen">
				<!-- 多选：商家特色 -->
				<block v-for="(item,index) in screendata" :key="index">
				<view>
					<view class="sortlist-title">{{item.title}}</view>
					<view class="sortlist-flex">
						<block v-for="(itemdata,indexs) in item.datas" :key="indexs">
						<text class="Choice" :class="{scractive: itemdata.id === 2}" @click="screenchoIce(indexs,itemdata.sign)">{{itemdata.name}}</text>
						</block>
					</view>
				</view>
				</block>
				<!-- 单选：人均价 -->
				<block v-for="(item,index) in person" :key="index">
				<view>
					<view class="sortlist-title">{{item.title}}</view>
					<view class="sortlist-flex">
						<block v-for="(itemdata,indexs) in item.datas" :key="indexs">
						<text class="Choice"  :class="{scractive: indexs == scrnum}" @click="personchoIce(indexs,itemdata.per)">{{itemdata.name}}</text>
						</block>
					</view>
				</view>
				</block>
				<!-- 置顶 -->
				<view class="sortlist-bottom">
					<text @click="emPty()">清空</text>
					<text @click="flag && compLete()">完成</text>
				</view>
			</view>
			
			
		</view>
		<!-- 透明背景 -->
		<view class="yin" v-if="ying" @click="backClic()"></view>
	</view>
</template>

<script>
	// 引入post请求
	import {publicing} from '../../../api/api.js'
	// 引入请求地址
	import {startingurl,multipleurl} from '../../../api/request.js'
	import {Sortlist,Person,Screendata} from '../../../jsdata/data.js'
	export default{
		data() {
			return {
				flag:false,
				synthesize:"综合排序",
				drop:false,
				sortmen:false,
				ying:false,
				num:0,
				scrnum:-1,
				// 接收筛选的对象
				multiobj:{},
				sortlist:Sortlist,
				person:Person,
				screendata:Screendata
			}
		},
		
		methods:{
			// 综合排序
			multiple(){
				this.drop = true
				this.sortmen = false
				this.backOne()
			},
			
			// 综合排序替换
			sortClick(index,name,screen,nums){
				this.synthesize = name
				this.num = index
				console.log(screen)
				this.backClic()
				this.starTing(screen,nums)
			},
			
			// 综合排序的请求
			starTing(screen,nums){
				let Data = {
					screen,
					nums
				}
				publicing(startingurl,Data)
				.then((res)=>{
					 console.log(res)
					// 存储到vuex数据仓库
					this.$store.commit('screenmuta',res.data.data)
				})
				.catch((err)=>{
					console.log(err)
				})
			},
			
			// 销量，速度，津贴
			saLes(){
				this.backClic()
			},
			
			// 筛选
			scReen(){
				this.drop = false
				this.sortmen = true
				this.backOne()
			},
			
			// 透明背景
			backOne(){
				setTimeout(()=>{
					this.ying = true
				},310)
			},
			// 隐藏透明背景
			backClic(){
				this.ying = false
				this.drop = false
				this.sortmen = false
			},
			
			// 商家特色（多选）
			screenchoIce(indexs,sign){
				// console.log(sign)
				if(this.screendata[0].datas[indexs].id == 1){
					// 选中
					this.screendata[0].datas[indexs].id = 2
					// console.log('选中')
					this.$set(this.multiobj,sign,sign)
					// this.$set给对象添加一个属性
					// console.log(this.multiobj)
				}else{
					// 未选中
					this.screendata[0].datas[indexs].id = 1
					// console.log('未选中')
					this.$delete(this.multiobj,sign)
					console.log(this.multiobj)
				}
			},
			
			// 人均价（单选）
			personchoIce(index,name){
				if(this.scrnum == index){
					// 未选中
					this.scrnum = -1
					this.$delete(this.multiobj,'capita')
					console.log(this.multiobj)
				}else{
					// 选中
					this.scrnum = index
					this.$set(this.multiobj,'capita',name)
					console.log(this.multiobj)
				}
			},
			
			
			// 完成
			compLete(){
				this.backClic()
				// 作业：完成没有商品数据的提示
				publicing(multipleurl,this.multiobj)
				.then((res)=>{
					console.log(res)
					// 存储到vuex数据仓库
					this.$store.commit('screenmuta',res.data.data)
				})
				.catch((err)=>{
					console.log(err)
				})
			},
			
			// 清空
			emPty(){
				// 商家特色
				this.screendata.forEach((item)=>{
					let arr = item.datas.map((items)=>{
						items.id = 1
						return items
					})
					console.log(arr)
				})
				this.multiobj = {}
				// 人均价
				this.scrnum = -1
				this.backClic()
			},
			
			
		},
		
		// 如果用户没有点击任何筛选条件，完成按钮应该被禁用
		computed:{
			// this.multiobj如果是空对象，禁止点击完成按钮，反之。。。。
			emptyIng(){
				let obj = JSON.stringify(this.multiobj) == '{}'
				// console.log(obj) //true:空对象
				if(obj == true){
					this.flag = false
				}else{
					this.flag = true
				}
			}
		}
	}
</script>

<style scoped>
	@import '../../../css/delicacy.css'
</style>
